<!-- 登录 -->

<template>
  <div id="Login">
    <WebForm>
      <!-- 标题 -->
      <div id="Login-title">{{ title }}</div>

      <!-- 账号 -->
      <FormInput bind="account" tip="账号" :max="20" noLabel required @enter="toLogin" />

      <!-- 密码 -->
      <FormPassword bind="password" tip="密码" :max="20" noLabel required @enter="toLogin" />

      <!-- 按钮 -->
      <BtnPrimary title="登录" @click="toLogin" />
    </WebForm>

    <!-- 方块气泡 -->
    <div v-for="item in 10" :key="item" class="Login-square" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Login',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 标题
     */
    title: () => process.env.VUE_APP_TITLE,
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听单项就绪
     */
    async readyOne() {
      location.reload()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击登录
     */
    async toLogin() {
      await this.refForm.check()
      this.startOne()
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
